<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>产品详情-Or官方设计</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/product_detail.css" />
		<link rel="stylesheet" type="text/css" href="css/media.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	</head>

	<body>
		<div class="Web Web_detail">
			<!--header 头部-->
			<header>
				<!--header_menu 菜单-->
				<input type="checkbox" id="input_menu"/>
				<label for="input_menu"><img src="img/1,18.png" alt="菜单" class="header_menu" onclick="openScoll()"/></label>
					<!--菜单-->
				<div class="BigMenu">
					<!--叉-->
					<label for="input_menu"><div  class="cha"><img  src="img/1_2cha.png" onclick="closeScoll()"/></div></label>
					<!--ico-->
					<div class="ico">
						<a href="https://weibo.com/orororor" target="_blank"><img src="img/1,13.png"/></a>
						<a href="img/2,erweima.jpg" target="_blank" title="or-微信二维码"><img src="img/1,14.png"/></a>
						<a href="https://www.baidu.com/" target="_blank"><img src="img/1,15.png"/></a>
						<a href="https://www.instagram.com/" target="_blank"><img src="img/1,16.png"/></a>
					</div>
					<!--选项-->
					<ul class="mune_ul">
						<li><a href="aboutor.html"><img src="img/1,6.png"/></a></li>
						<li><a href="product.html"><img src="img/1,7.png"/></a></li>
						<li><a href="space.html"><img src="img/1,8.png"/></a></li>
						<li><a href="user.html"><img src="img/1,9.png"/></a></li>
					</ul>
					<!--小选项-->
					<ul class="mune_smul">
						<li></li>
						<li><a href="news.html"><img src="img/1,10.png"/></a></li>
						<li></li>
						<li><a href="event.html"><img src="img/1,11.png"/></a></li>
						<li></li>
						<li><a href="contact.html"><img src="img/1,12.png"/></a></li>
						<li></li>
					</ul>
				</div>
				<!--header_logo Logo-->
				<a href="index.html"><img src="img/1,19.png" class="header_logo" /></a>
				<!--header_search 搜索-->
				<input type="checkbox" id="input_search"/>
				<label for="input_search"><img src="img/1,17.png" class="header_search"  onclick="openScoll()"/>	</label>
				<!--搜索-->
				<div class="BigSearch">
					<div class="BigSearch_topleft">
						<label for="input_search" onclick="closeScoll()">
							<img src="img/1_5.png" class="leftsign"/>
							<img src="img/1_4.png" class="return"/>
						</label>
					</div>
					<div class="search_input"><input type="text"></div>
					<div class="BigSearch_btm"><img src="img/1_1search any thing hit enter.png"/></div>
				</div>
			</header>
			<!--section 中部-->
			<section>
				<!--大图区-->
				<div class="sec_top">
					<img src="img/8,1.jpg"/>
					<div class="sec_top_title">
						<img src="img/8,2.png"/>
					</div>
				</div>
				<!--详情区-->
				<div class="sec_mid sec_mid_1st">
					<div><img src="img/8,3.jpg"/></div>
					<div>
						<img src="img/8,4.png"/>
						<p>Open and close units could be freely arranged; a design that is both decorative and practical; its functions could be adjusted to fit your daily routine; it offers a flexibility to accommodate different space.</p>
						<p>Open and close units could be freely arranged; a design that is both decorative and practica.</p>
					</div>
				</div>
				<div class="sec_mid sec_mid_2nd">
					<div><img src="img/8,5.jpg"/></div>
					<div><img src="img/8,6.jpg"/></div>
				</div>
				<div class="sec_mid sec_mid_3rd">
					<div><img src="img/8,7.jpg"/></div>
					<div>
						<img src="img/8,8.jpg"/>
						<p>size (cm)  / 200 x 140 x 40 <br /> material   /</p>
					</div>
				</div>
				<!--轮播图-->
				<!--标题-->
				<div id="sec_btm_title"><img src="img/8,9.png"/></div>
				<!--滚动-->
				<div class="swiper-container"> 
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="img/8,10.jpg"/></div>
						<div class="swiper-slide"><img src="img/8,11.jpg"/></div>
						<div class="swiper-slide"><img src="img/8,12.jpg"/></div>
					</div>
					<!--分页器-->
					<div class="swiper-pagination swiper-pagination-white"></div>
					<!--左右控件-->
					<div class="swiper-button-prev swiper-button-white"></div>
					<div class="swiper-button-next swiper-button-white"></div>
				</div>
			</section>
			
			<!--section_footer-底部图片-->
			<div class="section_footer"></div>
			<!--footer 底部-->
			<footer>
				<a href="http://www.miit.gov.cn/" target="_blank">
					<p>Copyright (c) Nissin Furniture Crafters Co ,Ltd All Rights Reserved</p>
				</a>
				<img src="img/1_3.png" alt="" class="topsign" />
			</footer>
			<!--/Web-->
		</div>
		<!--JavaScript-->
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/menu.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script>        
			  var mySwiper = new Swiper ('.swiper-container', {
			    loop: true, // 循环模式选项
			    slidesPerView : 3,
			    spaceBetween : 15,
			    // 分页器
			    pagination: {
			      el: '.swiper-pagination',
			      clickable :true,
			    },
			    // 前进后退按钮
			    navigation: {
			      nextEl: '.swiper-button-next',
			      prevEl: '.swiper-button-prev',
			    }
			  })        
  		</script>
	</body>

</html>